import {useEffect, useState} from 'react';
import {Col, Form, Input, message, Modal, Row} from "antd";
import SelectCodeByEqType from "@/components/Select/SelectCodeByEqType";
import {modifyCode} from "@/services/equipment";

const ModifyCode = (props: any) => {
  const {visible, onClose, onOk, data} = props
  const [form] = Form.useForm()
  const [types,setTypes]=useState(null)
  useEffect(() => {
    if (data && visible) {
      form.setFieldsValue({equipment_code: data.equipment_code, code: null})
      setTypes(data.equipment_type)
    }
  }, [visible, data])
  const handleOk = () => {
    form.validateFields().then(value => {
      const body = {
        ...value,
        contractId: data.contract_id,
        detailId: data.detail_id,
        equipmentType: data.equipment_type

      }
      modifyCode(body).then(res => {
        if (res.status === 200) {
          onOk()
          message.success(res.message).then()
        } else {
          message.error(res.message).then()
        }
      })
    })
  }
  return (
    <Modal
      destroyOnClose
      title={'修改设备'}
      visible={visible}
      onCancel={onClose}
      width={'50vw'}
      onOk={handleOk}
      keyboard={false}
      maskClosable={false}
    >
      <Form form={form} labelCol={{span: 6}} wrapperCol={{span: 14}} autoComplete="off">
        <Row>
          <Col span={12}>
            <Form.Item label="原设备" name={'equipment_code'}>
              <Input disabled/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="新设备" name={'code'} rules={[{required: true, message: '请选择设备编码'}]}>
              <SelectCodeByEqType types={types}/>
            </Form.Item>
          </Col>
        </Row>
      </Form>

    </Modal>
  );
};

export default ModifyCode;
